<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			
			* {
				padding: 0;
				margin: 0;
			}

			.box {
				transform-style: preserve-3d;
				/*width: 200px;*/
				/*height: 400px;*/
				border: 2px solid black;
				margin: 350px auto 0;

				/*
					形变基准点
				*/
				/*transform-origin: 0 0;*/
				/*transform-origin: 50px 50px;*/
				
				/* 值也可以是 right, left, bottom, top, center */
				/*transform-origin: right top;*/
				/*transform-origin: right bottom;*/
				/*transform-origin: top center;*/

				transition: 2s;

				width: 50px;
				height: 50px;
				background-color: cyan;
				border-radius: 25px;

				position: relative;
			}

			.box:hover {
				transform: rotateX(90deg);
			}

			/*.box:hover {*/
				/*transform: rotate(90deg) scaleX(2) scaleY(2);*/
				/*transform: scale(2, 3);*/
				/*transform: rotate(90deg);*/
			/*}*/

			.box>div {
				width: 100px;
				height: 200px;
				background-color: skyblue;
				outline: 3px solid gold;
				position: absolute;
				top: -300px;
				left: -25px;
				transform-origin: center 325px;
				transition: 2s;
			}

			/*.box:hover>.div1 {
				transform: rotate(30deg);
			}

			.box:hover>.div2 {
				transform: rotate(60deg);
			}

			.box:hover>.div3 {
				transform: rotate(90deg);
			}

			.box:hover>div4 {
				transform: rotate(120deg);
			}*/

			.box:hover>.div1 { transform: rotate(30deg); }
			.box:hover>.div2 { transform: rotate(60deg); }
			.box:hover>.div3 { transform: rotate(90deg); }
			.box:hover>.div4 { transform: rotate(120deg); }
			.box:hover>.div5 { transform: rotate(150deg); }
			.box:hover>.div6 { transform: rotate(180deg); }
			.box:hover>.div7 { transform: rotate(210deg); }
			.box:hover>.div8 { transform: rotate(240deg); }
			.box:hover>.div9 { transform: rotate(270deg); }
			.box:hover>.div10 { transform: rotate(300deg); }
			.box:hover>.div11 { transform: rotate(330deg); }
			.box:hover>.div12 { transform: rotate(360deg); }


		</style>
	</head>
	<body>

		<div class="box">
			
			<div class="div1"></div>
			<div class="div2"></div>
			<div class="div3"></div>
			<div class="div4"></div>
			<div class="div5"></div>
			<div class="div6"></div>
			<div class="div7"></div>
			<div class="div8"></div>
			<div class="div9"></div>
			<div class="div10"></div>
			<div class="div11"></div>
			<div class="div12"></div>


		</div>
		
	</body>
</html>



